<template>
	<view class="mar-top-20">
		<up-checkbox-group v-model="checkboxValue" placement="column" @change="submit">
			<view class="list pad-30 bg-white mar-bottom-30" v-for="item in list" :key="item.id">
				<up-checkbox placement="column" :name="item.id" :customStyle="{marginTop: '8rpx',width:'100%'}"
					size="36rpx" labelSize="26rpx" shape="circle">
					<template #label>
						<view class="betweenX">
							<view class="font-30 font-w-500">用水量: {{item.consumption}}</view>
							<view class="address color-error font-30 font-w-500">{{item.need_pay_amount}} 元</view>
						</view>
						<view class="font-26 mar-top-10 color-646464">
							<text>{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM')}}</text>
						</view>
					</template>
				</up-checkbox>
			</view>
		</up-checkbox-group>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { timeFormat } from '@/node_modules/uview-plus';
	const emit = defineEmits(['change']);

	const props = defineProps({
		list: {
			type: Array,
			default: () => (() => [])
		}
	});

	const checkboxValue = ref([]);

	// 确认提交
	const submit = (e) => {
		emit('change', e);
	}
</script>

<style scoped>
	.button-style {
		padding: 21rpx 0;
		text-align: center;
	}

	.picker {
		width: 240px;
		border: 1rpx solid #D5D5D5;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 6rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.list {
		width: 100%;
	}

	/deep/.u-checkbox__label-wrap {
		width: 100%;
	}
</style>